<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>一个模糊搜索的首次尝试</title>
    <!-- <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      输入框1：<input @input="serchval($event)" type="text" name="" value="" />
      <br />
      输入框2：<input
        @input="serchvalN($event)"
        type="text"
        name=""
        v-Model="svalue"
      />
      <ul>
        <li v-for="data of datalist">{{data}}</li>
      </ul>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          svalue: "",
          datalist: [
            "aaa",
            "bbb",
            "abc",
            "bhjks",
            "asdhjg",
            "sadasd",
            "asjkdh",
          ],
          list: ["aaa", "bbb", "abc", "bhjks", "asdhjg", "sadasd", "asjkdh"],
        },
        methods: {
          serchval(event) {
            var value = event.target.value;
            var dataListnew = new Array();
            if (value != "") {
              for (data in this.datalist) {
                if (this.datalist[data].indexOf(value) != -1) {
                  dataListnew.push(this.datalist[data]);
                }
              }
              console.log(dataListnew);
              this.datalist = dataListnew;
            } else {
              this.datalist = [
                "aaa",
                "bbb",
                "abc",
                "bhjks",
                "asdhjg",
                "sadasd",
                "asjkdh",
              ];
            }
          },
          serchvalN() {
            console.log(this.svalue);
            var newdata = this.list.filter(
              (item) => item.indexOf(this.svalue) > -1
            );
            this.datalist = newdata;
          },
        },
      });
    </script>
  </body>
</html>
